import React from 'react';
import { Card, Modal, Row, Col, Space, Badge } from 'antd';
import { getAntdIcon, iconList } from '@/utils/icons';
import styles from './style.css';

type AIconPreviewProps = {
  /** 表单提交函数 */
  onHandlerOK: Function;
  /** 表单重置回调函数 */
  onHandlerCancel?: Function;
  /** 表单弹窗标题 */
  modalTitle: string;
  /** 表单弹窗宽度 */
  modalWidth: number;
  /** 表单弹窗是否可见 */
  modalVisible: boolean;
}

export const AIconPreview: React.FC<AIconPreviewProps> = (props) => {
  
  const { modalVisible, modalTitle, modalWidth } = props;

  const onClick = (icon: string) => {
    const { onHandlerOK } = props;
    if (onHandlerOK) {
      onHandlerOK({icon})
    }
  }

  const onOk = () => {
    const { onHandlerOK } = props;
    if (onHandlerOK) {
      onHandlerOK({})
    }
  };

  const onCancel = () => {
    const { onHandlerCancel } = props;
    if (onHandlerCancel) {
      onHandlerCancel();
    }
  }

  return (
    <Modal
      title={modalTitle}
      destroyOnClose
      maskClosable={false}
      width={modalWidth}
      open={modalVisible}
      onOk={onOk}
      onCancel={onCancel}
    >
      <Card bordered={false} className={styles.cards}>
        <Row gutter={24} className={styles.iconPreview}>
          {
            iconList.map(icon => {
              return (
                <Col span={4} key={icon} onClick={() => onClick(icon)}>
                  <Space.Compact block size='small' direction='vertical' style={{ display: 'flex' }}>
                    <span style={{alignItems: 'center'}}>
                      {
                        getAntdIcon(icon)
                      }
                    </span>
                    <span style={{fontSize: 12, alignContent: 'center'}}>{icon}</span>
                  </Space.Compact>
                </Col>
              )
            })
          }
        </Row>
      </Card>
    </Modal>
  );
}